import { View, Text, Button } from '@tarojs/components';
import Taro from '@tarojs/taro';
import { observer } from 'mobx-react';
import { useEffect, useState } from 'react';
import { buyVip } from '@/service/apis/order';
import { getPackageList } from '@/service/apis/mine';
import { globalStore } from '@/store';
import CardInterest from './component/CardInterest';
import MoresShop from './component/MoreShop';
import './index.scss';

/**
 * 会员卡详情
 * @returns
 */
const VipCardDetail = () => {
  const [list, setList] = useState([]);
  const [buyed, setBuyed] = useState(false);
  // 购买会员
  const handleBuyVip = async () => {
    try {
      const { data } = await buyVip({
        store_name: globalStore.currentVipShop.store_name,
      });
      const { nonceStr, package: packageStr, paySign, signType, timeStamp } = data.pay_config;
      Taro.requestPayment({
        timeStamp,
        nonceStr,
        package: packageStr,
        signType,
        paySign,
        success: (res) => {
          if (res) {
            Taro.showToast({
              title: '购买成功',
              duration: 2000,
            });
            setTimeout(() => {
              Taro.navigateBack({});
            }, 2000);
          }
        },
        fail: (err) => {
          console.log('err: ', err);
          if (err?.errMsg.indexOf('cancel')) {
            // 用户主动取消支付
            Taro.showToast({
              title: '购买失败',
              icon: 'error',
              duration: 2000,
            });
          } else {
            Taro.showToast({
              title: '购买失败',
              icon: 'error',
              duration: 2000,
            });
          }
        },
      });
    } catch (err) {
      Taro.showToast({
        title: err?.message,
        icon: 'error',
        duration: 2000,
      });
    }
  };
  useEffect(() => {
    const querys: any = Taro.getCurrentInstance().router?.params;
    if (querys?.isBuy) {
      setBuyed(true);
    }
    getDetail();
  }, []);

  const getDetail = async () => {
    try {
      const { data } = await getPackageList();
      // console.log('data', data);
      setList(data.package_list);
    } catch (err) {
      Taro.showToast({
        title: err?.message,
        icon: 'none',
      });
    }
  };
  return (
    <View className="vipcard-detail-container">
      <View className="card-top-wrap">
        <View className="card-top">
          <View className="vip-card-wrap">
            {/* <View className="shop-info">
              <Image src="" />
              <Text>趣驿站</Text>
            </View> */}
            <Text className="card-title">趣驿站会员卡</Text>
            <Text className="date-line">有效期：购买后365天有效</Text>
          </View>
          <View className="card-price-wrap">
            <Text className="card-title">年费</Text>
            <Text className="card-price">￥99.00</Text>
          </View>
        </View>
      </View>
      <CardInterest list={list} />
      {!buyed && (
        <View>
          <MoresShop shopInfo={globalStore.currentVipShop} />
          <Text className="tips">绑定该门店后该会员卡仅可在该门店使用，请谨慎选择。</Text>
          <View className="bottom-btn">
            <Button className="purchase-btn" onClick={handleBuyVip}>
              立即购买
            </Button>
          </View>
        </View>
      )}
    </View>
  );
};
export default observer(VipCardDetail);
